<template>
  <a-modal class="position_type_modal" :title="title" :visible="visible" :confirmLoading="confirmLoading" @ok="handleOk" @cancel="handleCancel" width="840px">
    <cascader-panel :cascaderData="cascaderData" v-model="options" :single="single" :checkedDisable="checkedDisable" :stopDisable="stopDisable"></cascader-panel>
  </a-modal>
</template>
<script>
import CascaderPanel from '@/components/formComponents/CascaderPanel/CascaderPanel'
export default {
  name: 'CascaderModal',
  props: ['title', 'visible', 'single', 'dataFn', 'cascaderData', 'confirmLoading', 'checkedDisable', 'stopDisable'],
  model: { prop: 'cascaderData', event: 'change' },
  components: { CascaderPanel },
  data () {
    return {
      options: []
    }
  },
  async mounted () {
    if (this.dataFn) {
      let res = await this.dataFn()
      this.$emit('change', res.data)
    }
  },
  methods: {
    handleOk () {
      this.$emit('confirm', this.options)
    },
    handleCancel () {
      this.$emit('close')
    }
  }
}
</script>
<style lang="stylus">
.position_type_modal
  .ant-modal-body
    padding-top 0
</style>
